<template>
	<uni-list style="width: 100%">
		<view v-for="groupedUser in groupedUsers" :key="groupedUser.category">
			<div ref="contactItem" class="contact-item">
				<div
					v-if="showCategoryLabel"
					class="label"
					:style="paddingStyle"
					v-bind:class="{ sticky: enableCategoryLabelSticky }"
				>
					<p @click="baxe">{{ groupedUser.category.toUpperCase() }}</p>
				</div>
				<uni-list style="width: 100%">
					<view v-for="user in groupedUser.users" :key="user.uid">
						<div
							class="content"
							:name="'user-' + user.uid"
							:style="paddingStyle"
							v-bind:class="{
								active:
									(sharedContactState.currentFriend &&
										user._category === sharedContactState.currentFriend._category &&
										user.uid === sharedContactState.currentFriend.uid) ||
									(currentUser && currentUser.uid === user.uid)
							}"
							@click.stop="clickUserItem(user)"
						>
							<img class="avatar" :src="user.portrait" alt="" @error="imgUrlAlt" />
							<div style="padding-left: 10px">
								<p class="single-line">{{ user._displayName ? user._displayName : user.displayName }}</p>
								<p v-if="user._userOnlineStatusDesc" class="single-line user-online-status">
									{{ user._userOnlineStatusDesc }}
								</p>
							</div>
						</div>
					</view>
				</uni-list>
			</div>
		</view>
	</uni-list>
</template>

<script>
	import store from '../../store'
	import UserCardView from './UserCardView'
	import Config from '../../config'
	import UniList from '../../components/uni-list/uni-list.vue'

	export default {
		name: 'UserListView',
		props: {
			users: {
				type: Array,
				required: true
			},
			currentUser: {
				type: Object,
				default: null
			},
			showCategoryLabel: {
				type: Boolean,
				required: false,
				default: true
			},
			enableCategoryLabelSticky: {
				type: Boolean,
				required: false,
				default: false
			},
			clickUserItemFunc: {
				type: Function,
				required: false
			},
			paddingLeft: {
				type: String,
				required: false,
				default: '5px'
			}
		},
		data() {
			return {
				sharedContactState: store.state.contact
			}
		},
		methods: {
			baxe() {
				console.info(`groupedUsers:`, this.groupedUsers)
			},
			clickUserItem(user) {
				if (this.clickUserItemFunc) {
					this.clickUserItemFunc(user)
				} else {
					store.setCurrentFriend(user)
					uni.navigateTo({
						url: '/pages/contact/UserDetailPage',
						success: () => {
							console.log('nav to UserDetailPage success')
						},
						fail: (err) => {
							console.log('nav to UserDetailPage err', err)
						}
					})
				}
			},

			scrollActiveElementCenter() {
				let el = this.$el.getElementsByClassName('active')[0]
				el && el.scrollIntoView({ behavior: 'instant', block: 'center' })
			},

			imgUrlAlt(e) {
				e.target.src = Config.DEFAULT_PORTRAIT_URL
			}
		},

		mounted() {
			console.log('userList', this.users.length)
		},

		activated() {
			this.scrollActiveElementCenter()
		},

		destroyed() {},

		computed: {
			groupedUsers() {
				let groupedUsers = []
				if (!this.showCategoryLabel) {
					groupedUsers.push({
						category: 'not-show-category',
						users: this.users
					})
				} else {
					let current = {}
					let lastCategory = null
					this.users.forEach((user) => {
						if (!lastCategory || lastCategory !== user._category) {
							lastCategory = user._category
							current = {
								category: user._category,
								users: [user]
							}
							groupedUsers.push(current)
						} else {
							current.users.push(user)
						}
					})
				}
				return groupedUsers
			},
			paddingStyle() {
				return {
					paddingLeft: this.paddingLeft
				}
			}
		},
		components: {
			UniList,
			UserCardView
		}
	}
</script>

<style lang="less" scoped>
	.contact-item {
		--user-item-padding-left: 30px;
	}

	ul {
		list-style: none;
		width: 100%;
	}

	.avatar {
		width: 40px;
		height: 40px;
		border-radius: 3px;
	}

	.checkbox {
		margin-right: 10px;
	}

	.contact-item {
		display: flex;
		flex-direction: column;
		font-size: 13px;
		align-items: flex-start;
	}

	.contact-item .label {
		width: 100%;
		background-color: #fafafa;
	}

	.contact-item .label p {
		padding: 5px 5px 5px 0;
		border-bottom: 1px solid #e0e0e0;
	}

	.contact-item .label.sticky {
		position: sticky;
		top: 0;
	}

	.contact-item .content {
		padding: 5px 5px 5px 0;
		display: flex;
		width: 100%;
		align-items: center;
	}

	.contact-item .content span {
		margin-left: 10px;
	}

	.contact-item .content.active {
		background-color: #d6d6d6;
	}

	.contact-item .content:active {
		background-color: #d6d6d6;
	}

	.user-online-status {
		color: gray;
		font-size: 10px;
	}

	/*.contact-item .content:hover {*/
	/*  background-color: red;*/
	/*}*/
</style>
